<template>
    <div>
        <div class="top" style=" margin-top:21px">
            访问核心数据
        </div>
        <div class="topCard">
            <div class="topDIv">
                <img src="../../../../src/assets/operations/aCard1.png" alt="" class="img">
                <div class="aCardTitle">日下单数量</div>
                <div class="Number">{{data.dayOrderNum}}</div>
            </div>
            <div class="topDIv">
                <img src="../../../../src/assets/operations/aCard2.png" alt="" class="img">
                <div class="aCardTitle">日积分扣减数</div>
                <div class="Number">{{data.dayOrderIntegral}}</div>
            </div>
            <div class="topDIv">
                <img src="../../../../src/assets/operations/aCard3.png" alt="" class="img">
                <div class="aCardTitle">累积下单数量</div>
                <div class="Number">{{data.totalOrderNum}}</div>
            </div>
            <div class="topDIv">
                <img src="../../../../src/assets/operations/aCard4.png" alt="" class="img">
                <div class="aCardTitle">累积积分扣减数</div>
                <div class="Number">{{data.totalOrderIntegral}}</div>
            </div>
        </div>
        <div class="top">
            <div>访问核心指标趋势</div>
        </div>
        <a-card :bordered="false" class="echats">
            <div class="table-page-search-wrapper">
                <div style="display:flex;justify-content: space-between;">
                    <div style="display:flex;justify-content: space-between; width: 228px;">
                        <div @click="tabsChange('dataTotal')" :class="{'data-box':ys1,'jf-box':ys2}">日下单数量</div>
                        <div @click="tabsChange('cutIntegral')" :class="{'data-box':ys2,'jf-box':ys1}">日扣减积分数</div>
                    </div>
                    <img src="../../../../src/assets/operations/xia.png" alt="" @click="handleExportXls('数据看板')" style="width:32px;height:32px">   
                </div>
                <div style="margin-top:20px">
                    <span>{{data.startTime}}-{{data.endTime}}</span>&nbsp;&nbsp;&nbsp;&nbsp;
                    <span v-if="active=='dataTotal'">均值：{{data.dayOrderNumAve}}</span>
                    <span v-if="active=='cutIntegral'">均值：{{data.dayOrderIntegralAve}}</span>
                </div>
                <a-row :gutter="20">
                <a-col :xs="24" :sm="24">
                    <div class="chart">
                      <line-chart :chartData="lineChartData"></line-chart>
                    </div>
                </a-col>
                </a-row>
            </div>
        </a-card>
    </div>
</template>

<script>
import LineChart from './modules/LineChart'
import { dataBoard,exportDataBoard } from '@/api/marketingCenter/operations'

const lineChartData = {
  dataTotal: {
    expectedData: [
      100, 120, 161, 134, 105, 160, 165, 100, 120, 161, 134, 105, 160, 165, 159, 156 ,88, 77, 95, 65
    ],
    axiasx: ['06/30', '07/03', '07/06', '07/15', '07/18', '07/21', '07/24', '07/27', '07/30', '08/02', '08/05', '08/11', '08/14', '08/17', '08/20'],
  },
  cutIntegral: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    axiasx: [],
  },
};

export default {
    components: {
      LineChart,
    },
    data() {
      return {
        active:'dataTotal',
        lineChartData: lineChartData.dataTotal,
        data:{},
        ys1:true,
        ys2:false,
      }
    },
    computed: {},
    watch: {},
    created(){
        this.getList()
    },
    mounted(){},
    methods: {
        getList(){
            dataBoard().then(res=>{
                this.data = res.data
                if (this.active == 'dataTotal') {
                    this.lineChartData.expectedData =  res.data.dayOrderNumList.map(el =>{
                        return el.num
                    })
                    this.lineChartData.axiasx =  res.data.dayOrderNumList.map(el =>{
                        return el.dayTime
                    })
                } else if (this.active == 'cutIntegral') {
                    this.lineChartData.expectedData =  res.data.dayOrderIntegralList.map(el =>{
                        return el.integral
                    })
                    this.lineChartData.axiasx =  res.data.dayOrderIntegralList.map(el =>{
                        return el.dayTime
                    })
                }
            })
        },
        tabsChange(type) {
            this.ys1 = !this.ys1
	        this.ys2 = !this.ys2
            this.active = type
            this.lineChartData = lineChartData[type]
            this.getList()
        },
        handleExportXls(fileName){
            if(!fileName || typeof fileName != "string"){
                fileName = "导出文件"
            }
            let param = {}
            if(this.selectedRowKeys && this.selectedRowKeys.length>0){
                param['selections'] = this.selectedRowKeys.join(",")
            }
            console.log("导出参数",param)
            exportDataBoard(param).then((data)=>{
                if (!data) {
                    this.$message.warning("文件下载失败")
                    return
                }
                if (typeof window.navigator.msSaveBlob !== 'undefined') {
                    window.navigator.msSaveBlob(new Blob([data],{type: 'application/vnd.ms-excel'}), fileName+'.xls')
                }else{
                    let url = window.URL.createObjectURL(new Blob([data],{type: 'application/vnd.ms-excel'}))
                    let link = document.createElement('a')
                    link.style.display = 'none'
                    link.href = url
                    link.setAttribute('download', fileName+'.xls')
                    document.body.appendChild(link)
                    link.click()
                    document.body.removeChild(link); //下载完成移除元素
                    window.URL.revokeObjectURL(url); //释放掉blob对象
                }
            })
        },
    },
}
</script>
<style scoped>
.chart {
    widows: 100%;
    height: 300px;
}
.ant-tabs-bar {
    border-bottom: none !important;
}
.data-box{
    width: 104px;
    height: 40px;
    font-size: 14px;
    color: #303133;
    background-color: #EBEEF5;
    border-radius: 20px;
    text-align: center;
    line-height: 40px;
}
.data-box:hover{
    cursor:pointer
}
.jf-box:hover{
    cursor:pointer
}
.jf-box {
    width: 104px;
    height: 40px;
    font-size: 14px;
    color: #EBEEF5;
    text-align: center;
    line-height: 40px;
}
.echats{
    margin-left: 30px;
    margin-top:20px;
}
.top{
    color:#303133;
    font-size:16px;
    font-weight: 600;
    margin-left:30px;
}
.topCard{
    padding:20px 0px 40px 30px;
    display:flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.aCard{
    margin-right: 20px !important;
}
.topDIv{
    position: relative;
    margin-bottom: 10px;
}
.aCardTitle{
    position:absolute;
    font-size: 16px;
    color:#fff;
    top:30px;
    left:40px
}
.Number{
    position:absolute;
    font-size: 46px;
    color:#fff;
    top:64px;
    left:40px
}
@media screen and (max-width: 1680px) {
.img{
    width:340px !important;
}
  .aCardTitle{
    top:20px !important;
}
.Number{
    font-size: 44px !important; 
    top:44px !important;
}
}
@media screen and (max-width: 1600px) {
.img{
    width:320px !important;
}
  .aCardTitle{
    top:20px !important;
    left:30px
}
.Number{
    font-size: 44px !important; 
    top:44px !important;
    left:30px
}
}
@media screen and (max-width: 1440px) {
.img{
    width:280px !important;
}
  .aCardTitle{
    top:20px !important;
}
.Number{
    font-size: 36px !important; 
    top:44px !important;
}
}
@media screen and (max-width: 1400px) {
.img{
    width:270px !important;
}
  .aCardTitle{
    top:18px !important;
    left:25px
}
.Number{
    font-size: 34px !important; 
    top:40px !important;
    left:25px
}
}
@media screen and (max-width: 1280px) {
.img{
    width:245px !important;
}
  .aCardTitle{
    left:20px
}
.Number{
    font-size: 28px !important; 
    top:40px !important;
    left:20px
}
}
@media screen and (max-width: 1024px) {
.img{
    width:230px !important;
}
  .aCardTitle{
    top:14px !important;
    left:20px
}
.Number{
    font-size: 24px !important; 
    top:38px !important;
    left:20px
}
}
</style>